<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
<!--    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>-->
    <link rel="stylesheet" type="text/css"
          href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

    <script type="text/javascript"
            src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
    <script type="text/javascript"
            src="http://static.robotwebtools.org/keyboardteleopjs/current/keyboardteleop.min.js"></script>

    <script type="text/javascript">
        /**
         * Setup all GUI elements when the page is loaded.
         */
        function init() {
            // Connecting to ROS.
            var ros = new ROSLIB.Ros({
                // url: 'ws://192.168.1.120:9090'
                url: 'ws://127.0.0.1:8000'
            });

            // Initialize the teleop.
            var teleop = new KEYBOARDTELEOP.Teleop({
                ros: ros,
                topic: '/turtle1/cmd_vel'
                // topic: '/cmd_vel'
            });

            // Create a UI slider using JQuery UI.
            $('#speed-slider').slider({
                range: 'min',
                min: 0,
                max: 100,
                value: 90,
                slide: function (event, ui) {
                    // Change the speed label.
                    $('#speed-label').html('Speed: ' + ui.value + '%');
                    // Scale the speed.
                    teleop.scale = (ui.value / 100.0);
                }
            });

            // Set the initial speed .
            $('#speed-label').html('Speed: ' + ($('#speed-slider').slider('value')) + '%');
            teleop.scale = ($('#speed-slider').slider('value') / 100.0);
        }
    </script>
</head>

<body onload="init()">
<div id="speed-label"></div>
<div id="speed-slider"></div>
</body>
</html>